<template>
  <div>
    <router-view></router-view>
    <div class="goodslist">
      <q-infinite-scroll :handler="loadMore" ref="infiniteScroll">
        <ul>
          <li v-for="item in goodslists" v-bind:key="item.id" v-link="{name:'funDetail', params:{id: item.pid}}">
            <div class="relative">
              <div class="text-center">
                <img v-lazy="item.imageUrl"/>
              </div>
              <div class="labelArr flex">
                <i class="icon icon-love"></i> <span>{{item.love}}</span>
              </div>
            </div>
            <div class="desc">
              <p class="title">{{item.title}}</p>
              <div class="flex">
                <div class="flex"><i class="icon icon-clock"></i>{{item.timeStamp}}</div>
                <div><span class="price">￥{{item.price}}</span></div>
              </div>
            </div>
          </li>
        </ul>
        <spinner slot="message" name="dots" :size="40"></spinner>
      </q-infinite-scroll>
    </div>
    <v-loading :showLoading="showLoading"></v-loading>
  </div>
</template>
<script>
  import {ctoast, confirmDialog, AlertDialog} from '../../common/js/common'
  import {HttpRequest} from '../../common/js/httpFun'
  import {linklist} from '../../common/js/mockdata'
  import Loading from '../loading/index'
  export default({
    data () {
      return {
        'goodslists': [],
        'selectedItem': {},
        'showLoading': false,
        'pageNo': 1,
        'pageSize': 8,
        'totalPage': 1
      }
    },
    created () {
    },
    methods: {
      createToast (text) {
        ctoast(text)
      },
      createConfirmDialog (msg, yesFun, noFun) {
        confirmDialog(msg, yesFun, noFun)
      },
      loadMore: function (index, done) {
        if (this.pageNo <= this.totalPage) {
          this.showLoading = true
          let result = HttpRequest(linklist.activityList, {pageSize: 10, pageNo: this.pageNo}, 2)
          result.then((response) => {
            this.showLoading = false
            let body = response.body
            if (body.code === 0) {
              let lists = body.data
              this.totalPage = lists.pageTotal
              this.pageNo++
              if (lists && lists.pageDate) {
                for (let item of lists.pageDate) {
                  let oneday = 3600 * 24 * 1000
                  let diff = item.endTime - item.startTime - oneday
                  let startdate = new Date(item.startTime)
                  let enddate = new Date(item.endTime)
                  let startTime = startdate.getMonth() + '月' + startdate.getDate() + '日 ' + startdate.getHours() + ':' + startdate.getSeconds()
                  let endTime = ''
                  if (diff > 0) {
                    // 开始时间和截至时间大于一天
                    endTime = enddate.getMonth() + '月' + enddate.getDate() + '日 ' + enddate.getHours() + ':' + enddate.getSeconds()
                  }
                  else {
                    // 开始时间和截至时间在同一天
                    endTime = enddate.getHours() + ':' + enddate.getSeconds()
                  }
                  item.timeStamp = startTime + '~' + endTime
                }
                this.goodslists = this.goodslists.concat(lists.pageDate)
                done()
              }
              else {
                done()
                this.$refs.infiniteScroll.stop()
              }
            }
            else {
              AlertDialog('提示', body.msg)
            }
          }, (response) => {
            this.showLoading = false
            AlertDialog('提示', '获取列表失败，请稍后再试', '确定', true)
          }).catch((response) => {
            this.showLoading = false
            AlertDialog('提示', '获取列表失败，请稍后再试', '确定', true)
          })
        }
        else {
          done()
          this.$refs.infiniteScroll.stop()
        }
      },
      selectedItemFun (item, event) {
        this.$refs.leftDrawer.open()
        this.selectedItem = item
      }
    },
    components: {
      'v-loading': Loading
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/redifined.styl"
  @import "./style.styl"
</style>
